<template>
    <el-form :model="loginForm" ref="loginFormRef" label-width="80px" class="login-form">
      <el-form-item label="账号">
        <el-input v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </template>
   
  <script setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import http from '../http';
  import { useRouter } from 'vue-router';
  import { useCookies } from '@vueuse/integrations/useCookies';
  // import { useCookies } from '@vueuse/core/';


//获取路由器对象
const router = useRouter()
//获取本地cookies对象
const cookies = useCookies()
   
  const loginForm = reactive({
    username: '',
    password: ''
  });
   
  const loginFormRef = ref(null);
   
  const submitForm = () => {
    loginFormRef.value.validate((valid) => {
      if (valid) {
        http.post('user/checkLogin',loginForm)
        .then((res)=>{
          //返回token字符串
          const token = res;
          if(token!=''){
            ElMessage.success('登录成功');
            //登录成功的token存储本地Cookie
            cookies.set('token', token)
            router.push('/index')
          }else {
        ElMessage.error('请输入正确的账号和密码');
        return false;
      }
        }) 
      } 
    });
  };
  </script>
   
  <style>
  .login-form {
    width: 300px;
    margin: 100px auto;
  }
  </style>